{% load static %}
<!doctype html>
<html lang="zh-hans">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <title>Fixed top navbar example · Bootstrap v5.2</title>

<!--    <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/navbar-fixed/">-->

    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/jquery.dataTables.css' %}" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
      .aa{}
    </style>
    
    <!-- Custom styles for this template -->
    <link href="{% static 'css/navbar-top-fixed.css' %}" rel="stylesheet">
  </head>
  <body>
    
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav me-auto mb-2 mb-md-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

<main class="container">
  <div class="bg-light p-5 rounded">
  <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Detail</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011-04-25</td>
                <td>$320,800</td>
              <td>
                <a id="1" data-bs-toggle="modal" href="#staticBackdrop" class="aa text-primary" rel="noopener noreferrer" >Edit</a>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011-07-25</td>
                <td>$170,750</td>
                <td>
                  <a id="2" data-bs-toggle="modal" href="#staticBackdrop" class="aa text-primary" rel="noopener noreferrer">Edit</a>
                </td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009-01-12</td>
                <td>$86,000</td>
                <td></td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012-03-29</td>
                <td>$433,060</td>
                <td></td>
            </tr>
    </table>

  <!-- Modal -->
  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-xl">
    <form action="{url 'emp:submit'}" method="post" enctype="multipart/form-data" class="row g-3">
      {% csrf_token %}
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body" id="content">
            <fieldset id="fields" disabled>
            <h5>Employee Information</h5>
              <hr>
              <div class="row">
                <div class="col">
                  <input type="text" class="form-control" placeholder="" id="name" name="name" value="">
                </div>
                <div class="col">
                  <select class="form-select" id="position" name="position">
                    <option value="Data Coordinator">Data Coordinator</option>
                    <option value="Java Developer">Java Developer</option>
                    <option value="Development">Development Lead</option>
                    <option value="Director">Director</option>
                    <option value="Financial Controller">Financial Controller</option>
                    <option value="Integration Specialist">Integration Specialist</option>
                    <option value="JavaScript Developer">Javascript Developer</option>
                  </select>
                </div>
                <div class="col">
                  <input type="text" class="form-control" placeholder="" id="age" name="age" value="">
                </div>
                <div class="col">
                  <input type="text" class="form-control" placeholder="" id="salary" name="salary" value="">
                </div>
              </div>
              <hr>
            <h5>Department</h5>
            <div class="col">
              <input type="text" class="form-control" placeholder="" id="department" name="department" value="">
            </div>
            <hr>
            <div class="col">
            <button type="submit" id="ajax_submit" class="btn btn-primary">确认提交</button>
            </div>
          </fieldset>
          </div>
          <div class="modal-footer">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="gridCheck" value="true">
              <label class="form-check-label" for="gridCheck">
                Check me out
              </label>
            </div>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          </div>
        </div>
    </form>
  </div>
  </div>

  </div>
  <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
  <script src="{% static 'js/jquery-3.6.0.js' %}"></script>
  <script src="{% static 'js/jquery.dataTables.js' %}"></script>
  <script>
    function empty(parmeter) {
          switch (parmeter) {
            case "":
            case 0:
            case "0":
            case null:
            case false:
            case undefined:
              return true;
            default:
              return false;
          }
     }
    $(document).ready(function(){
          let table = new DataTable('#example', { lengthMenu: [ [10, 25, 50, -1],  [10, 25, 50, 'All'] ] });
          
          $("#gridCheck").click(
            function(){
              if (document.getElementById("fields").disabled) {
                document.getElementById("fields").disabled = false;
              } else {
                document.getElementById("fields").disabled = true;
              }
            });
          $("#staticBackdrop").on("show.bs.modal", function(event){
            let target = event.relatedTarget;
            let emp_id = target.attributes[0].value;
            document.getElementById("fields").disabled = false;
            $.ajax({
              url: "{% url 'emp:ajax' %}",
              type: "get",
              cache: false,
              data: {"id": emp_id},
              success: function(data){
                $("#name").val(data["employee"]["name"]);
                $("#age").val(data["employee"]["age"]);
                $("#salary").val(data["employee"]["salary"]);
                let position = document.getElementById("position");
                // let position = data["employee"]["position"];
                // $("#position").find()
                for (let index = 0; index < position.length; index++) {
                  const element = position[index];
                  position[index].selected = false;
                  if (element.value == data["employee"]["position"]) {
                    position[index].selected = true;
                    console.log(element);
                    break;
                  }
                }
              }
            });
            document.getElementById("fields").disabled = true;
          });
          $("#ajax_submit").on("click", function(event){
            event.preventDefault();
            $.ajax({
              url:"{% url 'emp:ajax' %}",
              type: "post",
              data: {
                "name": $("#name").val(), 
                "age": $("#age").val(), 
                "salary": $("#salary").val(),
                "position": $("#position").val(),
              },
            });
          });
      });
  </script>
</main>

  </body>
</html>
